<!DOCTYPE html>

<html>
	<head>
		<title>Tracks-Book , powered by Tracks4Bikers.com</title>
		<link rel="stylesheet" type="text/css" href="/mytracks/css/style.css">
    <script type="text/javascript" src="/mytracks/js/prototype.js"></script>
		<script type="text/javascript" src="/mytracks/js/gears_init.js"></script>
		<script type="text/javascript" src="/mytracks/js/application.js"></script>
    <script type="text/javascript" src="/mytracks/js/t4me.js"></script>
    <script type="text/javascript" src="/mytracks/js/t4me_lib.js"></script>
    <script type="text/javascript" src="/mytracks/js/canvastext-utf8.js"></script>
    <script type="text/javascript" src="/mytracks/js/flotr-0.2.0-alpha.js"></script>
    
    <!-- This key map   works only for tracks4bikers.com ! use your googleKey instead -->
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAbxYeBqAgnyVIgQHAA9RtMRQJjQOSeYCBQBIPmOQbml_apr3dxBQLIkVQhbiB0LNJGmOwyYNXEJVT1Q" type="text/javascript"></script>
    
    <!--[if IE]><script type="text/javascript" src="/mytracks/js/excanvas.js"></script><![endif]-->
	</head>

<body>
  <div style="background-image: url(/mytracks/images/menu_bk.jpg)">
    <a href="http://tracks4bikers.com">
      <img src="/mytracks/images/logo6.png" />
    </a>  
  </div>
  
  <h1>Tracks-Book- Beta 0.1</h1>
  
  <p>
  Manage GPS tracks in a local database. Requires <a href="http://code.google.com/apis/gears/" target="_new">google gears</a>.<br />
  Currently, only  Garmin TCX files can be uploaded (download a <a href="http://developer.garmin.com/schemas/tcx/v2/samples/FitnessHistoryDetail.tcx">sample tcx file</a> from Garmin site )
  </p>

  <button id="uploadButton">Upload TCX</button>
	<button id='trEditor_button'>Edit</button>
  <button id='delete_button'>Delete</button>
  <button id='exportgpx'>Export as GPX</button>
	<p><span id="status" style=" padding:10px;">&nbsp;</span>

  <div id='results_div'> </div>

	<div id='trEditor' style='display:none'>
   <form id='trEditor_form'>
     <table>
       <tr>
         <td>Name</td>
         <td><input id='trEditor_name' size='80' /></td>
       </tr>
       <tr>
         <td>Description</td>
         <td><textarea id='trEditor_description' cols='80' rows='5'></textarea></td>
       </tr>
     </table>
     <input type='submit' />
   </form>
</div>


	<table border="1">
	  <tr>
	    <td valign="top" style="width:300px;">
        <div>
          <button id='tracksBar_prev'>Prev</button>
          <button id='tracksBar_next'>Next</button>
          <span id="tracksBar_status"></span>
        </div>
	      <div id="track_list"></div>
	    </td>
	    <td valign="top" >
	      <div id="track_panel">
          <table>
            <tr>
              <td><b>Name</b></td><td><span id="track_panel_name"></td>
              <td valign='top' rowspan='5'><pre><span id="track_panel_description"></pre></td>
            </tr>
            <tr><td><b>Date</b></td><td><span id="track_panel_date"></td></tr>
            <tr><td><b>Distance (km)</b></td><td><span id="track_panel_distance"></td></tr>
            <tr><td><b>Time</b></td><td><span id="track_panel_secs"></td></tr>
            <tr><td><b>Avg speed (km/h)</b></td><td><span id="track_panel_avgSpeed"></td></tr>
          </table>
        </div>
	      <div id='map' style='width:800px; height:500px'> </div>
        <div id='profileOS' style='width:800px; height:200px'> </div>
	     </td>
	   </tr>
	 </table>

 <script>
    var app=new T4B.Local();
    app.xmlHandler['tcx']=new T4B.TCXParser();

    app.addTrackListeners(new T4B.TrackPanel('track_panel'));

    var trEditor=new T4B.TrackEditor('trEditor');
    app.addTrackListeners(trEditor);

    var gmap=new T4B.GMap('map');
    app.addTrackListeners(gmap);

    var trackList=new T4B.TracksList('track_list');
    app.addListTracksListeners(trackList);

    var tbar=new T4B.TracksBar('tracksBar');
    app.addTrackListeners(tbar);
    app.addListTracksListeners(tbar);

    
    app.addTrackListeners(new T4B.FlotrProfile('profileOS'));
    
    app.loadTracks();

</script>
</body>
</html>
